<template>
  <div class="cartContent">
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div v-if="JSON.stringify(this.cartsInfo) != '{}'" class="haveCart">
      <div class="delAllGoods">
        <van-button type="danger" @click="delAllGoods">清空购物车</van-button>
      </div>
      <div class="goodsLists">
        <van-swipe-cell v-for="item of cartsInfo" :key="item.goodsfo.id">
          <van-card :desc="item.goodsfo.name" class="goods-card" :thumb="item.goodsfo.image" />
          <div class="goodsPrice">
            <ul>
              <li>{{item.goodsfo.presentPrice | rmb}}</li>
              <li>x{{item.count}}</li>
              <li class="goodsSub">{{(item.count*item.goodsfo.presentPrice).toFixed(2) | rmb}}</li>
            </ul>
          </div>
          <div class="stepper">
            <van-stepper
              :value="item.count"
              integer
              @minus="minus(item.goodsfo.id)"
              @plus="plus(item.goodsfo.id)"
              @blur="blur(item.goodsfo.id)"
              @overlimit="overlimit"
            />
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              @click="delGoods(item.goodsfo.id)"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
        <van-submit-bar :price="totalAmount" button-text="提交订单" @submit="onSubmit" />
      </div>
    </div>
    <div v-else class="emptyCart">
      <div class="centerContent">
        <div class="emptyImg">
          <img src="./images/emptyCart.jpeg" alt />
        </div>
        <div class="zhong">购物车居然是空的</div>
        <div>"在忙，也要记得买点什么犒劳自己~</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { Toast } from "vant";
import { Notify } from 'vant';
export default {
  name: "shopcar",
  data() {
    return {
      value: "",
      cartsInfo: {},
      totalAmount: 0
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    // 从localStorage获取购物车信息
    cartsData() {
      this.$store.dispatch("asynShowCart");
      this.cartsInfo = this.$store.state.carts;
      console.log(this.cartsInfo);
    },
    // 获取总计
    getTotal() {
      let total = 0;
      let _self = this;
      for (let item in _self.cartsInfo) {
        total +=
          _self.cartsInfo[item].count *
          _self.cartsInfo[item].goodsfo.presentPrice;
      }
      _self.totalAmount = Number(total.toFixed(2) * 100);
    },
    // 按钮增值
    plus(id) {
      let shopIndex = this.cartsInfo[id];
      shopIndex.count++;
      this.$store.dispatch("asynUpdateStorage");
      this.getTotal();
    },
    // 按钮减值
    minus(id) {
      let shopIndex = this.cartsInfo[id];
      shopIndex.count--;
      this.$store.dispatch("asynUpdateStorage");
      this.getTotal();
    },
    // 失焦触发
    blur(id) {
      let shopIndex = this.cartsInfo[id];
      // 默认有个event事件参数。不需要传event参数，失焦后要拿到输入框的值。
      shopIndex.count = event.target.value;
      this.$store.dispatch("asynUpdateStorage");
      this.getTotal();
    },
    // 点击不可用按钮
    overlimit() {
      Toast.fail("商品数量不能小于1");
    },
    onSubmit() {
      Notify({ type: 'primary', message: '支付接口未开发！' });
    },
    delAllGoods() {
      let _self = this;
      Dialog.confirm({
        title: "确定清空所有商品？"
      })
        .then(() => {
          for (let i in _self.$store.state.carts) {
            // console.log(_self.$store.state.carts[i])
            delete _self.$store.state.carts[i];
          }
          this.$store.dispatch("asynUpdateStorage");
          this.getTotal();
          Toast.success("购物车已清空！");
        })
        .catch(() => {
          // on cancel
        });
    },
    delGoods(gid) {
      delete this.$store.state.carts[gid];
      this.$store.dispatch("asynUpdateStorage");
      this.getTotal();
    }
  },
  mounted() {
    this.cartsData();
    this.getTotal();
  }
};
</script>
<style  scoped>
.cartContent {
  position: relative;
  /* background-color: #f2f2f2; */
}
.delAllGoods {
  height: 60px;
  border-bottom: 1px solid #ccc;
}
.delAllGoods .van-button {
  border-radius: 6px;
  float: right;
  margin: 8px 10px 0 0;
}
/* 商品列表的css */
.goodsLists{
  height: 460px;
  overflow: scroll;
}
.van-swipe-cell {
  padding-bottom: 6px;
}
.van-swipe-cell .van-card {
  background-color: white;
}
.goodsPrice {
  position: absolute;
  z-index: 99;
  right: 20px;
  top: 14px;
  line-height: 22px;
  text-align: right;
  font-size: 16px;
  color: black;
}
.goodsPrice .goodsSub {
  font-size: 18px;
  color: #ff0000;
}
.stepper {
  position: absolute;
  top: 70px;
  left: 110px;
  background-color: white;
}
.van-card__desc.van-ellipsis {
  padding-top: 10px;
  width: 200px;
}
/* 修改提交栏的样式 */
.van-submit-bar {
  bottom: 50px;
  border-top: 1px solid #ccc;
}
/* 修改右滑删除按钮的样式 */
.van-swipe-cell__right .van-button--normal {
  height: 100%;
}
.haveCart {
  background-color: #f2f2f2;
}

/* 购物车为空的布局 */
/* <div v-else class="emptyCart">
      <div class="emptyImg">
        <img src="./images/emptyCart.jpeg" alt />
      </div>
      <div class="zhong">购物车居然是空的</div>
      <div>"在忙，也要记得买点什么犒劳自己~</div>
    </div> */
.emptyCart {
  background-color: white;
}
.emptyCart .centerContent {
  width: 200px;
  height: 200px;
  text-align: center;
  margin: 100px auto;
}
.emptyImg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-left: 50px;
}
.emptyImg img {
  width: 100%;
}
.emptyCart .zhong {
  margin: 10px;
}
</style>